import {
  Layout,
  Accordion,
  UserSubPageBase,
  Header,
  Paragraph,
  AbstractImage
} from "@/components";
import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";
import style from "./index.module.scss";

type PrivApiResponseShape = {
  privacyPolicy: {
    title: string;
    details: string;
  }[];
  base: {
    updateTime: string;
    address: string;
    latitude: string;
    details: string;
    longitude: string;
  }[];
};

export default function PrivacyPolicyPage() {
  const [privData, setPrivData] = useState<PrivApiResponseShape | null>(null);

  useEffect(() => {
    Taro.request({
      url: `${process.env.apiEndpoint}/about/privacyPolicy`,
      success(result) {
        setPrivData(result.data.data as PrivApiResponseShape);
      },
    });
  }, []);

  const baseData = privData?.base[0];

  return (
    <Layout>
      {privData && (
        <UserSubPageBase
          title="隐私政策"
          subTitleParagraph={`法律条款 | 最近更新：${baseData && baseData.updateTime
            }`}
          scrollable
        >
          <View className={style.list}>
            {
              privData.privacyPolicy.map((privItem, privItemIdx) => {
                // console.log('privItem: ', privItem);
                return (
                  <Accordion
                    key={privItemIdx}
                    title={privItem.title}
                    content={privItem.details.split(/\n/).map((chunk) => ({
                      type: "text",
                      text: chunk,
                    }))}
                    img={privItem.img} // 添加 img 属性并传递值
                  />

                );
              })
            }
          </View>


          {/* <View className={style["img"]}>
            {
              privData.privacyPolicy.map((privItem, privItemIdx) => {
                return (
                  privItem.img ? <Image mode="widthFix" src={privItem.img} /> : null
                );
              })
            }
          </View> */}








          {/* {baseData && (
            <>
              <Header type="heading-s">联络我们</Header>
              {baseData.details.split(/\n/).map((chunk, chunkIdx) => (
                <Paragraph key={chunkIdx} className={style["paragraph-chunk"]}>
                  {chunk}
                </Paragraph>
              ))}
            </>
          )} */}
        </UserSubPageBase>
      )}
    </Layout>
  );
}
